<template>
	<view class="addBat">


		<u-form :model="form" label-width=200 ref="uForm">
			<u-form-item label="VIN码" prop="vin">
				<u-input v-model="form.vin" placeholder="请输入17位VIN码" />
				<!-- 	<u-button type="warning" size="mini" plain :hair-line=true :ripple="true" ripple-bg-color="#ff9900" @click="bindUserCode">
					<u-icon name="scan" size="26" class="u-p-r-8"></u-icon>
				</u-button> -->
			</u-form-item>
			<u-form-item label="天行健终端号"  prop="txjid">
				<u-input v-model="form.txjid" />
				<!-- 	<u-button type="warning" size="mini" plain :hair-line=true :ripple="true" ripple-bg-color="#ff9900">
					<u-icon name="scan" size="26" class="u-p-r-8"></u-icon>
				</u-button> -->
			</u-form-item>
			<u-form-item label="远程监控终端号" prop="yuanchengid">
				<u-input v-model="form.yuanchengid" />
				<!-- 	<u-button type="warning" size="mini" plain :hair-line=true :ripple="true" ripple-bg-color="#ff9900">
					<u-icon name="scan" size="26" class="u-p-r-8"></u-icon>
				</u-button> -->
			</u-form-item>
			<u-form-item label="动力电池编码">
				<u-input v-model="form.batteryid" />
				<u-button type="primary" size="mini" :hair-line=true :ripple="true" ripple-bg-color="#dbf1e1"
					@click="addBtid">
					<u-icon name="plus" size="26" class="u-p-r-8"></u-icon>
				</u-button>

			</u-form-item>
			
			<u-form-item prop="batteryidArr">
		
		
				<view v-if="form.batteryidArr.length > 0">
					<u-table>
						<u-tr>
							<u-th width="10%">序号</u-th>
							<u-th width="70%">动力电池编码</u-th>
							<u-th width="20%">操作</u-th>
						</u-tr>
						<u-tr v-for="(item,i) in form.batteryidArr">
							<u-td width="10%">{{i+1}}</u-td>
							<u-td width="70%">{{item}}</u-td>
							<u-td width="20%">
								<u-button type="error" size="mini" :hair-line=true :ripple="true" ripple-bg-color="#dbf1e1"
									@click="deleBt(i)">
									<u-icon name="minus-circle" size="30" class="u-p-r-8"></u-icon>
								</u-button>
							</u-td>
						</u-tr>
					</u-table>
				
					<!-- 	<view v-for="(item,i) in form.batteryidArr" @click="showPho(item)">
						{{item}}11
					</view>	 -->
				
				
				</view>
			<view v-else>
				<u-empty text="目前还没电池数据" mode="list"></u-empty>
			</view>
			</u-form-item>
			

			


		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					vin: '',
					txjid: '',
					yuanchengid: '',
					batteryid: '',
					batteryidArr: [],

				},
				rules: {
					vin: [
						// 对name字段进行长度验证
						{
							len: 17,
							message: 'VIN码必须为17位',
							trigger: ['change', 'blur']
						},
						// 对name字段进行必填验证
						{
							required: true,
							message: '请输入17为VIN码',
							trigger: ['change', 'blur']
						}
					],
					txjid: [

						{
							required: true,
							message: '请输入天行健终端号',
							trigger: ['change', 'blur']
						}
					],
					yuanchengid: [
						{
							required: true,
							message: '请输入远程监控终端号',
							trigger: ['change', 'blur']
						}


					]
				},



			}
		},

		methods: {
			//增加电池id到数据
			addBtid() {
				if (this.form.batteryid === "") {
					this.$u.toast("请先扫描输入动力电池编码！");
				} else {
					var batteryid = this.form.batteryid
					if (this.form.batteryidArr.indexOf(batteryid) == -1) {
						this.form.batteryidArr.push(batteryid)
						this.form.batteryid = ""
					} else {
						console.log(batteryid)
						console.log(this.form.batteryidArr)
						this.$u.toast("此电池编码已经录入！");
					}

				}
			},
			deleBt(batteryid) {
				//asdasdads

				console.log(this.form.batteryidArr)
				this.form.batteryidArr.splice(batteryid, 1)
			},
			getUserInfo() {
				this.userinfo = this.vuex_user
			},
			onBackPress(event){
				uni.navigateTo({
				url:"/pages/works/battery/index"
				})
				return true;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						if(this.form.batteryidArr.length>0){	
							var batteryidArr=this.form.batteryidArr.join(",")
							var vin =this.form.vin.toLocaleUpperCase()
							this.$u.api.txj.add({
									vin: vin,
									txjid: this.form.txjid,
									yuanchengid: this.form.yuanchengid,
									batteryid: batteryidArr,
									uid: this.userinfo.userId,
									uname: this.userinfo.nickName,
									createtime: new Date().toISOString().slice(0, 10)
								})
								.then(res => {
									if (res.code == 200) {
										this.form={
					vin: '',
					txjid: '',
					yuanchengid: '',
					batteryid: '',
					batteryidArr: [],

				}
										uni.showModal({
											title: '提示',
											content: res.msg,
											showCancel: false
										});
									}
								});
						}else{
							uni.showModal({
								title: '提示',
								content: "请至少录入一个动力电池编号!",
								showCancel: false
							});
						}
					

					} else {
						console.log("验证失败！")
					}
				});
			}
		},
		
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.getUserInfo();
		}

	}
</script>

<style scoped>
	.addBat {
		padding: 10px 20px;
	}
</style>
